<!--群组信息面板组件-->
<template>
  <!--展示群组信息-->
  <div v-if="group" class="card w-full bg-base-100 shadow-xl">
    <figure><img src="https://picsum.photos" alt="Shoes" oncontextmenu="return false"/></figure>
    <div class="card-body">
      <div class="avatar">
        <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2">
          <img :src="group.avatarUrl" oncontextmenu="return false"/>
        </div>
      </div>

      <h2 class="card-title">{{group.name}}</h2>
      <span>群号 {{group.groupNo}}</span>
      <span>群人数 {{group.users.length}}</span>
      <div class="collapse bg-base-100 border-base-300 border">
        <input type="checkbox" />
        <div class="collapse-title font-semibold">查看群成员</div>
        <div class="collapse-content text-sm">
          <div class="grid grid-cols-10 gap-4">
            <div class="avatar" v-for="member in group.users">
              <div class="ring-primary ring-offset-base-100 w-20 rounded-full ring ring-offset-2">
                <img :src="member.avatarUrl" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-actions justify-center">
        <button class="btn btn-ghost btn-sm" @click="clickMessage">发消息</button>
        <button class="btn btn-ghost btn-sm" @click="clickVoice">语音</button>
        <button class="btn btn-ghost btn-sm" @click="clickVideo">视频</button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import type {GroupItem} from '../../models/contacts.ts';
import {useChatStore} from "@/stores/chat.ts";
import {defineProps, inject, toRaw} from 'vue'

//父组件传值时的定义
const props = defineProps<{
  group?: GroupItem;
}>();
const toRoute = inject('toRoute')

const chatStore = useChatStore()


const clickAdd = ()=>{
  console.debug("clickAdd ...")
}


const clickMessage = () => {
  console.log(`clickMessage...`);
  chatStore.obtainChatting(toRaw(props.group))

  toRoute("/chats")
}
const clickVoice = () => {
  console.log(`clickVoice...`);

}
const clickVideo = () => {
  console.log(`clickVideo...`);

}

</script>

<style scoped lang="scss">

</style>